<template>
	<div class="home">
		<el-container>
			<el-header>
				<div class="header-left">
					<span v-show="!isCollapse">新月养生商城管理后台</span>
				</div>
				<div class="head-right">
					<!-- <img
						src="https://6a61-javaee-7gsopbbpa6a34aac-1308330585.tcb.qcloud.la/%E5%8D%83%E5%BA%93%E7%BD%91_%E7%9A%AE%E8%82%A4%E6%8A%A4%E8%82%A4%E6%8A%A4%E8%82%A4%E5%93%81_%E5%85%83%E7%B4%A0%E7%BC%96%E5%8F%B712898359.png?sign=194fe974c690f8a5f1d33622de1b7867&t=1637483782" /> -->
					<img
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fa467aebd801525568936c94d00561e433d9ad503.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642169576&t=0a5c7062c74b8258af9a4c16f6e37c58" />
					<div>
						新月超级管理员
					</div>
					<div class="loginOut" @click="loginOut">退出</div>

				</div>
			</el-header>

			<el-container class="main">
				<Menu></Menu>
				<el-main>
					<el-card>
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index">
								<strong>{{item.name}}</strong>
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-card>
					<router-view></router-view>
					<Footer></Footer>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Menu from "./common/Menu"
	import Footer from "./common/Footer"
	export default {
		name: 'Home',
		components: {
			Menu,
			Footer
		},
		data() {
			return {
				isCollapse: false,
				username: '',
			}
		},
		created() {
			this.username = localStorage.getItem('username')
		},
		methods: {
			loginOut() {
				this.$alert('您确定要退出吗？', '退出提示', {
					confirmButtonText: '确定',
					callback: action => {
						// localStorage.removeItem('token')
						localStorage.clear()
						this.$router.push('/login')
					}
				})
			}
		}
	}
</script>


<style>
	.main {
		width: 100%;
		position: absolute;
		top: 60px;
		bottom: 0;
		overflow: hidden;
	}

	.el-header {
		background-color: #024E34;
		color: #fff;
		text-align: center;
		line-height: 60px;
		display: flex;
		justify-content: space-between;
	}

	.el-header .header-left .coll {
		cursor: pointer;
	}

	.head-right {
		display: flex;
		width: 300px;

	}

	.head-right :nth-child(1) {
		width: 40px;
		height: 40px;
		max-width: 100%;
		display: block;
		align-self: center;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
	}
	.head-right :nth-child(2) {
		margin-right: 10px;
	}

	.main .el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		/* line-height: 160px; */
	}

	.loginOut {
		cursor: pointer;
	}
</style>
